<template>
  <div class="map-view">
    <MapView ref="landMap" 
        @init="initMap" 
        @onClick="onClickLand"
        @getLandList="getLandList"
        :queryString="getCookie('plantingPlanId')?` and plantingplanid=${getCookie('plantingPlanId')}`:''"
        :location="locationObj"  />
    <div class="location-view" @click="btnLocation">
      <Icon name="aim" class="icon-location"  color="#07c160" />
    </div>
     <Popup
        v-model:show="openPopup"
        :overlay="true"
        position="bottom"
        :overlay-style="{backgroundColor:'#00000010'}"
        :style="{ padding:'10px 0' }">
          <!-- 地块详情 -->
         <landInfo v-if="openPopup" 
            ref="landInfoRef" 
          :showRightIcon="false" 
          :showMore="false" 
          :farmLandId="farmLandId"></landInfo>
      </Popup>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';

import MapView from '@/components/Map/index.vue'
import landInfo from './components/landInfo.vue'
import { getCookie } from '@/utils/httpParamsHandler';
import { Button,Popup,Picker,Icon} from 'vant';
const openPopup:any = ref(false)
const farmLandId:any =ref('')
const landMap:any =ref(null)
const landInfoRef:any = ref(null)
const landMapList:any = ref([])
const locationObj = ref({})
let mapView:any= null

onMounted(async ()=>{
})

const initMap =(view:any)=>{
  mapView=view
  landMap.value.getFarmLandList({})
}

const getLandList =(data:any)=>{
  landMapList.value = data?.features
  let centerList= landMapList.value.map((item:any)=>{
      return {
        lon:Number(item.properties.locationlongitude),
        lat:Number(item.properties.locationlatitude)
      }
  })
  landMap.value.setMapCenter(centerList)
}


const flattenArrayList =(arr:any)=> {
  return arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenArrayList(val)) : acc.concat(val), []);
}

const onClickLand =(row:any)=>{
  farmLandId.value = row.features[0]?.properties.farmlandid
  openPopup.value = true
  landMap.value.selectMapLands(farmLandId.value,flattenArrayList(row.features[0]?.geometry.coordinates))
}

//定位当前
const btnLocation =()=>{
   wx.getLocation({
        type: 'wgs84',
        success: (res:any)=> {
          locationObj.value = {
            longitude:Number(res.longitude),
            latitude:Number(res.latitude)
          }
        },
        fail: (err:any)=> {
        }
   });
}
</script>
<style lang="scss" scoped>
.map-view{
  height:100vh;
  width:100vw;
  position: relative;
  overflow: hidden;
}
.right-bottom-view .van-button{
  --van-button-normal-font-size:12px;
  --van-button-normal-padding:2px 4px;
  --van-button-default-height: 30px;
  --van-button-default-line-height:30px;
}
.total-view{
  display: flex;
  z-index: 999;
  position: absolute;
  top:10px;
  width:300px;
  left:50%;
  margin-left:-150px;
  align-items: center;
  justify-content: space-between;
  .item{
    color:#fff;
    font-size:13px;
    background-color: #00000090;
    border-radius:4px;
    width:120px;
    text-align: center;
    padding:5px 0;
    .num{
      font-size:15px;
      font-weight: bold;
    }
  }
}
.right-bottom-view{
  z-index: 999;
  position: absolute;
  bottom:20px;
  right: 10px;
  width:100px;
  text-align: right;
  .btn-top{
    margin-top:6px;
    width:70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.location-view{
  position: absolute;
  z-index:99;
  left:10px;
  bottom:100px;
  height:40px;
  width:40px;
  background-color: #fff;
  border-radius:4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:15px;
  .icon-location::before{
    font-size:24px;
  }
}
</style>
